import React from 'react'
import {
  View,
  TextInput,
  ScrollView,
  Text,
  StyleSheet,
} from 'react-native'
import Button from 'react-native-button'
import TimerMixin from 'react-native-timer-mixin'
import {
  windowWidth,
  windowHeight,
} from '../../../util/dimension'
import Theme from '../../theme'
const {
  FIRST_FONT,
} = Theme


const inputWidth = (windowWidth()- 20)*5/6

const styles = StyleSheet.create({
  container:{

  },
  content:{
    paddingHorizontal:10,
    marginTop:windowHeight()/5,
    alignItems:'center',
  },
  input:{
    width:inputWidth,
    height:40,
    borderWidth:1,
    borderRadius:5,
    marginTop:10,
    paddingLeft:10,
  },
  captcheFrame:{
    width:inputWidth,
    flexDirection:'row',
    alignItems:'center',
    marginTop:10,
    justifyContent:'space-between',
  },
  captcheInput:{
    height:40,
    borderWidth:1,
    borderRadius:5,
    paddingLeft:10,
    width:120,
  },
  descTxt:{
    width:inputWidth,
    marginTop:18,
    color:FIRST_FONT,
    fontSize:14,
    marginLeft:5,
  },
  blue:{
    color:'blue',
  },
  okBut:{
    marginTop:26,
  },
})
const Counting = 'Counting'
const Await = 'Await'
const Regist = React.createClass({
  mixins:[TimerMixin],
  getInitialState(){
    return {
      captcheButTxt: '获取验证码',
      captcheStatus: Await,
      captcheCounting: 0,
    }
  },
  _startTimer(){
    const that = this
    const intervalId = this.setInterval(()=>{
      const {
        captcheButTxt,
        captcheStatus,
        captcheCounting,
      } = that.state
      let newCaptcheButTxt = ''
      let newCaptcheStatus = Counting
      let newCaptcheCounting = 0
      if(captcheStatus == Await){
        newCaptcheCounting = 59
        newCaptcheButTxt = `${newCaptcheCounting}(秒)`
      }else if(captcheCounting == 1){
        clearInterval(intervalId)
        newCaptcheCounting = 0
        newCaptcheButTxt = '获取验证码'
        newCaptcheStatus = Await
      }else{
        newCaptcheCounting = captcheCounting - 1
        newCaptcheButTxt = `${newCaptcheCounting}(秒)`
      }
      that.setState({
        captcheButTxt: newCaptcheButTxt,
        captcheCounting: newCaptcheCounting,
        captcheStatus: newCaptcheStatus,
      })
    },1000)
  },
  render(){
    const {
      captcheButTxt,
      captcheStatus,
    } = this.state
    return (
      <ScrollView style={styles.container}>
          <View style={styles.content}>
            <View>
            <TextInput
              style={styles.input}
              autoFocus
              maxLength={11}
              placeholder='手机号'
              returnKeyType='next'
              keyboardType='phone-pad'
              onChangeText = {(text) =>this._mobile = text}
            />
            </View>
            <View style={styles.captcheFrame}>
              <TextInput
                style={[ styles.captcheInput]}
                autoFocus
                maxLength={11}
                placeholder='验证码'
                returnKeyType='next'
                keyboardType='phone-pad'
                onChangeText = {(text) =>this._captche = text}

              />
              <Button
                onPress={this._startTimer}
              >{captcheButTxt}</Button>
            </View>
            <View>
            <TextInput
              style={styles.input}
              autoFocus
              maxLength={20}
              placeholder='密码'
              returnKeyType='next'
              secureTextEntry
              onChangeText = {(text) =>this._pwd = text}
            />
            </View>
            <Text style={styles.descTxt}>
              我已经阅读并同意接受<Text style={styles.blue}>《隐私协议》</Text>
            </Text>
          </View>

          <Button
            style={styles.okBut}
          >确认</Button>
      </ScrollView>
    )
  },
})

export default Regist
